<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>flex-dome案例</title>
		<!--链接式:推荐使用-->
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>
	<body>
	    <!-- ◆基础布局 -->
	    <ul class="ul1">
	        <li></li>
	    </ul>
	    <ul class="ul2">
	        <li></li>
	        <li></li>
	    </ul>
	    <ul class="ul3">
	        <li></li>
	        <li></li>
	        <li></li>
	    </ul>
	    <ul class="ul4">
	        <li></li>
	        <li></li>
	        <li></li>
	        <li></li>
	    </ul>
	    <ul class="ul5">
	        <li></li>
	        <li></li>
	        <li></li>
	        <li></li>
	        <li></li>
	    </ul>
	    <ul class="ul6">
	        <li></li>
	        <li></li>
	        <li></li>
	        <li></li>
	        <li></li>
	        <li></li>
	    </ul>
	     <box class="box">
					<ul class="top">
						<li></li>
						<li></li>
						<li></li>
					</ul>
					<ul class="bottom">
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
			</box>
	    <ul class="ul8">
	        <li></li>
	        <li></li>
	        <li></li>
	        <li></li>
	        <li></li>
	        <li></li>
	        <li></li>
	        <li></li>
	    </ul>
	    <ul class="ul9">
	        <li></li>
	        <li></li>
	        <li></li>
	        <li></li>
	        <li></li>
	        <li></li>
	        <li></li>
	        <li></li>
	        <li></li>
	    </ul>
	</body>
</html>
<style>
	* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
	}

	.box {
			float: left;
			margin: 10px 0 0 10px;
			width: 80px;
			height: 100px;
			background-color: #ccc;
			border-radius: 5px;
	}

	li {
			list-style: none;
			width: 20px;
			height: 20px;
			border-radius: 50%;
			background-color: red;
	}

	.box ul {
			display: flex;
			justify-content: space-between;
			width: 80px;
			height: 50px;
			margin: 0;
			padding: 5px;
	}
	/* 第一给圆圈：自身默认靠左上伸缩，可以不写 */
	.top li:nth-child(1) {
			align-self: flex-start;
	}
	/* 第二个圆圈：自身居中伸缩 */
	.top li:nth-child(2) {
			align-self: center;
	}
	/* 第三个圆圈：自身靠右下伸缩 */
	.top li:nth-child(3) {
			align-self: flex-end;
	}
	/* 最后四个圆圈的 父元素 ul */
	.box .bottom {
			flex-wrap: wrap;
			padding: 0 12px;
	}
</style>